<!DOCTYPE html>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright © 2013-2016 The Nxt Core Developers.                            ~
  ~ Copyright © 2016-2017 Jelurida IP B.V.                                    ~
  ~                                                                           ~
  ~ See the LICENSE.txt file at the top-level directory of this distribution  ~
  ~ for licensing information.                                                ~
  ~                                                                           ~
  ~ Unless otherwise agreed in a custom licensing agreement with Jelurida B.V.,
  ~ no part of the Nxt software, including this file, may be copied, modified,~
  ~ propagated, or distributed except according to the terms contained in the ~
  ~ LICENSE.txt file.                                                         ~
  ~                                                                           ~
  ~ Removal or modification of this copyright notice is prohibited.           ~
  ~                                                                           ~
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<html>
	<head>
		<link href="icon.png" rel="icon" type="image/png">
		<meta charset="UTF-8">
		<title>NRS</title>
		<style type="text/css">
			body {background-color: #C0C0C0; color: #000; font-family: Tahoma; font-size: 10pt; margin: 0; padding: 0;}
			button {box-sizing: border-box; font-family: Tahoma; font-size: 10pt; height: 40px; width: 100%;}
			div {position: absolute;}
			.account {color: #0F0; cursor: default; display: none; font-weight: bold; height: 20px; left: 50px;
                line-height: 20px; top: 15px; width: 160px;}
			.add {background-image: url(); cursor: pointer; display: inline; height: 20px; margin: 0 0 0 10px; width: 20px;}
			.balance {color: #0F0; cursor: default; display: none; font-size: 18pt; font-weight: bold; height: 20px;
                left: 100%; line-height: 20px; margin-left: -270px; text-align: right; top: 15px; width: 190px;}
			.bar {background-color: #000; height: 50px; left: 0; width: 100%;}
			.close {background-image: url(); cursor: pointer; height: 20px; left: 100%; margin-left: -30px; top: 5px; width: 20px;}
			.collapse {background-image: url(); cursor: pointer; height: 20px; left: 100%; margin-left: -30px; top: 0; width: 20px;}
			.dialog {background-color: #C0C0C0; border: 1px solid #000; cursor: default; height: 320px; left: 50%; margin: -151px -201px;
                top: 50%; width: 400px;}
			.dialogContent {height: 250px; left: 10px; top: 40px; width: 380px;}
			.dialogHeader {background-color: #000; height: 30px; left: 0; top: 0; width: 100%;}
			.dialogTitle {color: #FFF; cursor: default; font-weight: bold; height: 20px; left: 10px; line-height: 20px; top: 5px; width: 350px;}
			.disabledAccounts {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: 45px; top: 10px; width: 30px;}
			.disabledAssetExchange {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: 5px; top: 10px; width: 30px;}
			.disabledBlocks {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: 5px; top: 10px; width: 30px;}
			.disabledIssuedAssets {background-image: url(); cursor: pointer; height: 20px; left: 100%; margin-left: -90px; top: 0; width: 20px;}
			.disabledLibrary {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: -75px; top: 10px; width: 30px;}
			.disabledOnlyMyOrders {background-image: url(); cursor: pointer; height: 20px; left: 100%; margin-left: -30px; top: 0; width: 20px;}
			.disabledOtherAssets {background-image: url(); cursor: pointer; height: 20px; left: 100%; margin-left: -30px; top: 0; width: 20px;}
			.disabledOwnedAssets {background-image: url(); cursor: pointer; height: 20px; left: 100%; margin-left: -60px; top: 0; width: 20px;}
			.disabledPeers {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: -35px; top: 10px; width: 30px;}
			.disabledReputation {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: 45px; top: 10px; width: 30px;}
			.disabledSendMoney {background-image: url(); display: none; height: 30px; left: 100%; margin-left: -40px; top: 10px; width: 30px;}
			.disabledShops {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: -35px; top: 10px; width: 30px;}
			.disabledTransactions {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: -75px; top: 10px; width: 30px;}
			.edit {background-image: url(); cursor: pointer; height: 20px; width: 20px;}
			.enabledAccounts {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: 45px; top: 10px; width: 30px;}
			.enabledAssetExchange {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: 5px; top: 10px; width: 30px;}
			.enabledBlocks {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: 5px; top: 10px; width: 30px;}
			.enabledIssuedAssets {background-image: url(); cursor: pointer; height: 20px; left: 100%; margin-left: -90px; top: 0; width: 20px;}
			.enabledLibrary {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: -75px; top: 10px; width: 30px;}
			.enabledOnlyMyOrders {background-image: url(); cursor: pointer; height: 20px; left: 100%; margin-left: -30px; top: 0; width: 20px;}
			.enabledOtherAssets {background-image: url(); cursor: pointer; height: 20px; left: 100%; margin-left: -30px; top: 0; width: 20px;}
			.enabledOwnedAssets {background-image: url(); cursor: pointer; height: 20px; left: 100%; margin-left: -60px; top: 0; width: 20px;}
			.enabledPeers {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: -35px; top: 10px; width: 30px;}
			.enabledReputation {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: 45px; top: 10px; width: 30px;}
			.enabledSendMoney {background-image: url(); cursor: pointer; display: none; height: 30px; left: 100%; margin-left: -40px; top: 10px; width: 30px;}
			.enabledShops {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: -35px; top: 10px; width: 30px;}
			.enabledTransactions {background-image: url(); cursor: pointer; height: 30px; left: 50%; margin-left: -75px; top: 10px; width: 30px;}
			.expand {background-image: url(); cursor: pointer; height: 20px; left: 100%; margin-left: -30px; top: 0; width: 20px;}
			.interfaceDisabler {background-image: url(); cursor: not-allowed; display: none; height: 100%; left: 0; top: 0; width: 100%;}
			.key {background-image: url(); cursor: pointer; display: inline; height: 20px; margin: 0 0 0 30px; width: 20px;}
			.lock {background-image: url(); cursor: pointer; display: none; height: 30px; left: 10px; top: 10px; width: 30px;}
			.nonConnected {background-image: url(); cursor: pointer; height: 20px; width: 20px;}
			.remove {background-image: url(); cursor: pointer; height: 20px; width: 20px;}
			.section {border-bottom: 1px solid #808080; cursor: default; font-weight: bold; height: 20px; left: 10px; line-height: 20px; padding-bottom: 4px; padding-left: 10px; white-space: nowrap;}
			.unlock {background-image: url(); cursor: pointer; height: 30px; left: 10px; top: 10px; width: 30px;}
			.widget {background-color: #F0F0F0; border: 1px solid #808080; left: 10px; top: 60px;}
			.widgetContent {left: 0; top: 30px; width: 100%;}
			.widgetHeader {background-color: #808080; height: 30px; left: 0; top: 0; width: 100%;}
			.widgetTitle {color: #FFF; cursor: default; font-weight: bold; height: 20px; left: 10px; line-height: 20px; top: 5px;}
			iframe {margin: 0; padding: 0; position: absolute;}
			.advancedWidget {border: none; left: 0; width: 100%; top: 30px;}
			.widget {border-bottom: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #808080; border-top: none;}
			input {box-sizing: border-box; font-family: Tahoma; font-size: 10pt; width: 100%;}
			span.cents {font-size: 12pt;}
			table {border-collapse: collapse; width: 100%;}
			td {padding: 10px;}
			.label {padding-bottom: 5px;}
			.input {padding-top: 0;}
			.message {height: 230px; text-align: center;}
			textarea {box-sizing: border-box; font-family: Tahoma; font-size: 10pt; height: 80px; width: 100%;}
		</style>
		<script type="text/javascript">
			var widgetIds = ["transactions", "peers", "blocks", "accounts"], widgetToggleClassNames = ["Transactions", "Peers", "Blocks", "Accounts"];
			var advancedWidgetIds = ["library", "shops", "assetExchange", "reputation"],
			    advancedWidgetToggleClassNames = ["Library", "Shops", "AssetExchange", "Reputation"];
			var user = Math.random(), numberOfPendingRequests = 0, account = "";
			var selectedAssetId;
			
			function adjustAmount() {
				var quantity = parseInt(document.getElementById("input").value), price = parseFloat(document.getElementById("price").value);
				document.getElementById("amount").value = isNaN(quantity) || isNaN(price) ? "" : quantity * price;
			}
			
			function adjustDeadlineTime() {
				var deadline = document.getElementById("deadline").value;
				document.getElementById("deadlineTime").value = isNaN(deadline) ? "" :
				    ("~ " + (new Date((new Date()).getTime() + deadline * 3600000)).toLocaleString());
			}
			
			function adjustFee() {
				var amount = parseInt(document.getElementById("amountNXT").value);
				document.getElementById("feeNXT").value = isNaN(amount) ? 1 : (amount < 500 ? 1 : Math.round(amount / 1000));
			}
			
			function adjustSections(widgetIndex, widgetHeight, sections) {
				var widget = document.getElementById(widgetIds[widgetIndex]),
				    widgetWidth = parseInt(widget.style.width.substr(0, widget.style.width.length - 2));
				var section2 = document.getElementById(sections[1]), section3 = document.getElementById(sections[2]),
				    section1Frame = document.getElementById(sections[0] + "Frame"),
				    section2Frame = document.getElementById(sections[1] + "Frame"),
				    section3Frame = document.getElementById(sections[2] + "Frame");
				section3.style.width = section2.style.width = document.getElementById(sections[0]).style.width = (widgetWidth - 30) + "px";
				section3Frame.style.width = section2Frame.style.width = section1Frame.style.width = (widgetWidth - 20 - 2) + "px";
				var sectionVisibilityFlags = [document.getElementById(sections[0] + "Collapse").style.display != "none",
				    document.getElementById(sections[1] + "Collapse").style.display != "none",
				    document.getElementById(sections[2] + "Collapse").style.display != "none"], sectionHeight = 0;
				for (i = 3; i-- > 0; ) {
					if (sectionVisibilityFlags[i]) {
						sectionHeight++;
					}
				}
				sectionHeight = sectionHeight == 0 ? 0 : Math.floor((widgetHeight - 30 - 115) / sectionHeight);
				section1Frame.style.height = (sectionHeight - 1) + "px";
				section2.style.top = (45 + (sectionVisibilityFlags[0] ? sectionHeight : 0)) + "px";
				section2Frame.style.top = (70 + (sectionVisibilityFlags[0] ? sectionHeight : 0)) + "px";
				section2Frame.style.height = (sectionHeight - 1) + "px";
				section3.style.top = (70 + (sectionVisibilityFlags[0] ? sectionHeight : 0) +
				    (sectionVisibilityFlags[1] ? sectionHeight : 0) + 10) + "px";
				section3Frame.style.top = (105 + (sectionVisibilityFlags[0] ? sectionHeight : 0) +
				    (sectionVisibilityFlags[1] ? sectionHeight : 0)) + "px";
				section3Frame.style.height = (widgetHeight - 30 - (105 + (sectionVisibilityFlags[0] ? sectionHeight : 0) +
				    (sectionVisibilityFlags[1] ? sectionHeight : 0)) - 10 - 1) + "px";
				section1Frame.style.display = sectionVisibilityFlags[0] ? "block" : "none";
				section2Frame.style.display = sectionVisibilityFlags[1] ? "block" : "none";
				section3Frame.style.display = sectionVisibilityFlags[2] ? "block" : "none";
			}
			
			function adjustWidgets() {
				var visibleWidgets = [], i, widget, widgetWidth, widgetHeight;
				for (i = 0; i < 4; i++) {
					widget = document.getElementById(widgetIds[i]);
					if (document.getElementById(widgetIds[i] + "Toggle").className == "enabled" + widgetToggleClassNames[i]) {
						widget.style.display = "block";
						visibleWidgets[visibleWidgets.length] = widget;
					} else {
						widget.style.display = "none";
					}
				}
				widgetWidth = Math.floor((innerWidth - 10 - visibleWidgets.length * 10) / visibleWidgets.length);
				widgetHeight = innerHeight - 122;
				for (i = visibleWidgets.length; i-- > 0; ) {
					visibleWidgets[i].style.left = (10 + i * (widgetWidth + 10)) + "px";
					visibleWidgets[i].style.width = ((i == visibleWidgets.length - 1 ? (innerWidth - 10 - 10 * visibleWidgets.length - i * widgetWidth)
					    : widgetWidth) - 2) + "px";
					visibleWidgets[i].style.height = widgetHeight + "px";
					document.getElementById(visibleWidgets[i].id + "Content").style.height = (innerHeight - 102) + "px";
				}
				if (document.getElementById(widgetIds[0] + "Toggle").className == "enabledTransactions") {
					adjustSections(0, widgetHeight, ["myTransactions", "unconfirmedTransactions", "doubleSpendingTransactions"]);
				}
				if (document.getElementById(widgetIds[1] + "Toggle").className == "enabledPeers") {
					adjustSections(1, widgetHeight, ["activePeers", "knownPeers", "blacklistedPeers"]);
				}
				if (document.getElementById(widgetIds[2] + "Toggle").className == "enabledBlocks") {
					adjustSections(2, widgetHeight, ["recentBlocks", "orphanedBlocks", "weirdBlocks"]);
				}
				if (document.getElementById(widgetIds[3] + "Toggle").className == "enabledAccounts") {
					adjustSections(3, widgetHeight, ["activeAccounts", "newAccounts", "suspiciousAccounts"]);
				}
			}
			
			function closeDialog() {
				document.getElementById("interfaceDisabler").style.display = "none";
			}
			
			function collapse(section) {
				document.getElementById(section + "Expand").style.display = "block";
				document.getElementById(section + "Collapse").style.display = "none";
				adjustWidgets();
			}
			
			function expand(section) {
				document.getElementById(section + "Expand").style.display = "none";
				document.getElementById(section + "Collapse").style.display = "block";
				adjustWidgets();
			}
			
			function formatAmount(amount) {
				var digits=[], formattedAmount = "", i, isNegative = false;
				if (amount < 0) {
				    isNegative = true;
				    amount = -amount;
				}
				var fractionalPart = amount % 100000000;
				amount = Math.floor(amount / 100000000);
				do {
					digits[digits.length] = amount % 10;
					amount = Math.floor(amount / 10);
				} while (amount > 0);
				for (i = 0; i < digits.length; i++) {
					if (i > 0 && i % 3 == 0) {
						formattedAmount = "'" + formattedAmount;
					}
					formattedAmount = digits[i] + formattedAmount;
				}
				if (isNegative) {
				    formattedAmount = "-" + formattedAmount;
				}
				var fractionalPartString = "";
                for (i = ("" + fractionalPart).length; i < 8; i++) {
                    fractionalPartString += "0";
                }
                fractionalPartString += fractionalPart;
            	return formattedAmount + "<span class='cents'>." + fractionalPartString + "</span>";
			}
			
			function generateAuthorizationToken() {
				document.getElementById("input").readOnly = true;
				document.getElementById("generateAuthorizationToken").disabled = true;
				document.getElementById("secretPhrase").readOnly = true;
				sendRequest("generateAuthorizationToken&website=" + encodeURIComponent(document.getElementById("input").value) +
				    "&secretPhrase=" + encodeURIComponent(document.getElementById("secretPhrase").value));
			}
			
			function initialize() {
				adjustWidgets();
				sendRequest("getInitialData");
			}
			
			function issueAsset() {
				var element, name, description, quantity, fee;
				element = document.getElementById("input");
				name = element.value;
				element.readOnly = true;
				element = document.getElementById("description");
				description = element.value;
				element.readOnly = true;
				element = document.getElementById("quantity");
				quantity = element.value;
				element.readOnly = true;
				element = document.getElementById("fee");
				fee = element.value;
				element.readOnly = true;
				document.getElementById("issueAsset").disabled = true;
				sendRequest("issueAsset&name=" + encodeURIComponent(name) + "&description=" + encodeURIComponent(description) +
				    "&quantity=" + quantity + "&fee=" + fee);
			}
			
			function placeAskOrder() {
				var element, quantity, price, fee;
				element = document.getElementById("input");
				quantity = element.value;
				element.readOnly = true;
				element = document.getElementById("price");
				price = element.value;
				element.readOnly = true;
				element = document.getElementById("fee");
				fee = element.value;
				element.readOnly = true;
				document.getElementById("placeAskOrder").disabled = true;
				sendRequest("placeAskOrder&asset=" + selectedAssetId + "&quantity=" + quantity + "&price=" + price + "&fee=" + fee);
			}
			
			function placeBidOrder() {
				var element, quantity, price, fee;
				element = document.getElementById("input");
				quantity = element.value;
				element.readOnly = true;
				element = document.getElementById("price");
				price = element.value;
				element.readOnly = true;
				element = document.getElementById("fee");
				fee = element.value;
				element.readOnly = true;
				document.getElementById("placeBidOrder").disabled = true;
				sendRequest("placeBidOrder&asset=" + selectedAssetId + "&quantity=" + quantity + "&price=" + price + "&fee=" + fee);
			}
			
			function requestAccountLocking() {
				sendRequest("lockAccount");
			}
			
			function requestAssets() {
				sendRequest("getAssets&showIssuedAssets=" + (document.getElementById("issuedAssets").className == "enabledIssuedAssets") +
				    "&showOwnedAssets=" + (document.getElementById("ownedAssets").className == "enabledOwnedAssets") + "&showOtherAssets=" +
				    (document.getElementById("otherAssets").className == "enabledOtherAssets"));
			}
			
			function sendMoney() {
				var element, recipient, amountNXT, feeNXT, deadline, secretPhrase;
				element = document.getElementById("input");
				recipient = element.value;
				element.readOnly = true;
				element = document.getElementById("amountNXT");
				amountNXT = element.value;
				element.readOnly = true;
				element = document.getElementById("feeNXT");
				feeNXT = element.value;
				element.readOnly = true;
				element = document.getElementById("deadline");
				deadline = element.value;
				element.readOnly = true;
				element = document.getElementById("secretPhrase");
				secretPhrase = element.value;
				element.readOnly = true;
				document.getElementById("sendMoney").disabled = true;
				sendRequest("sendMoney&recipient=" + recipient + "&amountNXT=" + amountNXT + "&feeNXT=" + feeNXT + "&deadline=" + deadline +
				    "&secretPhrase=" + encodeURIComponent(secretPhrase));
			}
			
			function sendRequest(requestParameters) {
				var request = new XMLHttpRequest();
				var params = "user=" + user + "&requestType=" + requestParameters + "&" + Math.random();
				request.open("POST", "/nxt-proxy");
				request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				request.onreadystatechange = function() {
					if (this.readyState == 4 && this.status == 200) {
						if (--numberOfPendingRequests < 1) {
							sendRequest("getNewData");
						}
						var responses = JSON.parse(this.responseText).responses, i, j, response, element, object, object2;
						for (i = 0; i < responses.length; i++) {
							response = responses[i];
							switch (response.response) {
							case "denyAccess":
								numberOfPendingRequests++;
								document.title = "Access denied";
								document.body.style.backgroundColor = "#000";
								document.body.innerHTML = "<div style='background-image: url(); height:24px; left:50%; margin: -12px -155px; top:50%; width: 310px;'></div>";
								break;
							case "lockAccount":
								document.getElementById("unlock").style.display = "block";
								document.getElementById("lock").style.display = "none";
								document.getElementById("account").style.display = "none";
								account = "";
								document.getElementById("balance").style.display = "none";
								document.getElementById("enabledSendMoney").style.display = "none";
								document.getElementById("disabledSendMoney").style.display = "none";
								document.getElementById("myTransactionsFrame").contentWindow.removeAllTransactions();
								document.getElementById("recentBlocksFrame").contentWindow.setDeadline(-1);
								break;
							case "notifyOfAcceptedAskOrder":
								showMessage("The order is placed.");
								break;
							case "notifyOfAcceptedAssetIssuence":
								showMessage("The asset is issued.");
								break;
							case "notifyOfAcceptedBidOrder":
								showMessage("The order is placed.");
								break;
							case "notifyOfAcceptedTransaction":
								showMessage("The money is sent.");
								break;
							case "notifyOfIncorrectAskOrder":
								showMessage(response.message, function() {
									showAskOrderDialog(response.quantity, response.price, response.fee);
								});
								break;
							case "notifyOfIncorrectAssetIssuence":
								showMessage(response.message, function() {
									showAssetDialog(response.name, response.description, response.quantity, response.fee);
								});
								break;
							case "notifyOfIncorrectBidOrder":
								showMessage(response.message, function() {
									showBidOrderDialog(response.quantity, response.price, response.fee);
								});
								break;
							case "notifyOfIncorrectTransaction":
								showMessage(response.message, function() {
									showTransactionDialog(response.recipient, response.amountNXT, response.feeNXT, response.deadline);
								});
								break;
							case "processInitialData":document.title = "NRS " + response.version;
								if (response.unconfirmedTransactions) {
									document.getElementById("unconfirmedTransactionsFrame").contentWindow.addTransactions(response.unconfirmedTransactions);
								}
								if (response.activePeers) {
									document.getElementById("activePeersFrame").contentWindow.addPeers(response.activePeers);
								}
								if (response.knownPeers) {
									document.getElementById("knownPeersFrame").contentWindow.addPeers(response.knownPeers);
								}
								if (response.blacklistedPeers) {
									document.getElementById("blacklistedPeersFrame").contentWindow.addPeers(response.blacklistedPeers);
								}
								if (response.recentBlocks) {
									document.getElementById("recentBlocksFrame").contentWindow.addBlocks(response.recentBlocks, false);
								}
								break;
							case "processNewData":
								if (response.addedMyTransactions) {
									document.getElementById("myTransactionsFrame").contentWindow.addTransactions(response.addedMyTransactions, false);
								}
								if (response.addedConfirmedTransactions) {
									for (j = 0; j < response.addedConfirmedTransactions.length; j++) {
										object = response.addedConfirmedTransactions[j];
										if (object.sender == account) {
											object2 = {"index": object.index, "blockTimestamp": object.blockTimestamp,
											    "transactionTimestamp": object.transactionTimestamp, "account": object.recipient,
											    "sentAmountNQT": object.amountNQT, "feeNQT": object.feeNQT, "numberOfConfirmations": 0, "id": object.id};
											if (object.recipient == account) {
												object2.receivedAmountNQT = object.amountNQT;
											}
											document.getElementById("myTransactionsFrame").contentWindow.addTransaction(object2, true);
										} else if (object.recipient == account) {
											document.getElementById("myTransactionsFrame").contentWindow.addTransaction(
											    {"index": object.index, "blockTimestamp": object.blockTimestamp,
											    "transactionTimestamp": object.transactionTimestamp, "account": object.sender,
											    "receivedAmountNQT": object.amountNQT, "feeNQT": object.feeNQT, "numberOfConfirmations": 0,
											    "id": object.id}, true);
										}
									}
									;
								}
								if (response.addedUnconfirmedTransactions) {
									for (j = 0; j < response.addedUnconfirmedTransactions.length; j++) {
										object = response.addedUnconfirmedTransactions[j];
										if (object.sender == account) {
											object2 = {"index": object.index, "transactionTimestamp": object.timestamp, "deadline": object.deadline,
											    "account": object.recipient, "sentAmountNQT": object.amountNQT, "feeNQT": object.feeNQT,
											    "numberOfConfirmations": -1, "id": object.id};
											if (object.recipient == account) {
												object2.receivedAmount = object.amount;
											}
											document.getElementById("myTransactionsFrame").contentWindow.addTransaction(object2, true);
										} else if (object.recipient == account) {
											document.getElementById("myTransactionsFrame").contentWindow.addTransaction({"index": object.index,
											    "transactionTimestamp": object.timestamp, "deadline": object.deadline, "account": object.sender,
											    "receivedAmountNQT": object.amountNQT, "feeNQT": object.feeNQT, "numberOfConfirmations": -1, "id": object.id},
											    true);
										}
									}
									document.getElementById("unconfirmedTransactionsFrame").contentWindow.addTransactions(response.addedUnconfirmedTransactions);
								}
								if (response.removedUnconfirmedTransactions) {
									document.getElementById("myTransactionsFrame").contentWindow.removeTransactions(response.removedUnconfirmedTransactions);
									document.getElementById("unconfirmedTransactionsFrame").contentWindow.removeTransactions(
									    response.removedUnconfirmedTransactions);
								}
								if (response.addedActivePeers) {
									document.getElementById("activePeersFrame").contentWindow.addPeers(response.addedActivePeers);
								}
								if (response.addedKnownPeers) {
									document.getElementById("knownPeersFrame").contentWindow.addPeers(response.addedKnownPeers);
								}
								if (response.addedBlacklistedPeers) {
									document.getElementById("blacklistedPeersFrame").contentWindow.addPeers(response.addedBlacklistedPeers);
								}
								if (response.changedActivePeers) {
									document.getElementById("activePeersFrame").contentWindow.changePeers(response.changedActivePeers);
								}
								if (response.removedActivePeers) {
									document.getElementById("activePeersFrame").contentWindow.removePeers(response.removedActivePeers);
								}
								if (response.removedKnownPeers) {
									document.getElementById("knownPeersFrame").contentWindow.removePeers(response.removedKnownPeers);
								}
								if (response.removedBlacklistedPeers) {
									document.getElementById("blacklistedPeersFrame").contentWindow.removePeers(response.removedBlacklistedPeers);
								}
								if (response.addedRecentBlocks) {
									document.getElementById("myTransactionsFrame").contentWindow.incrementNumberOfConfirmations();
									for (j = 0; j < response.addedRecentBlocks.length; j++) {
										object = response.addedRecentBlocks[j];
										if (object.generator == account && object.totalFee > 0) {
											document.getElementById("myTransactionsFrame").contentWindow.addTransaction({"index": "block" + object.index,
											    "blockTimestamp": object.timestamp, "block": object.block, "earnedAmountNQT": object.totalFeeNQT,
											    "numberOfConfirmations": 0, "id": "-"}, true);
										}
									}
									document.getElementById("recentBlocksFrame").contentWindow.addBlocks(response.addedRecentBlocks, true);
								}
								if (response.addedOrphanedBlocks) {
									document.getElementById("recentBlocksFrame").contentWindow.removeBlocks(response.addedOrphanedBlocks);
									document.getElementById("orphanedBlocksFrame").contentWindow.addBlocks(response.addedOrphanedBlocks);
								}
								break;
							case "requestAssets":
								requestAssets();
								break;
							case "setBalance":
								document.getElementById("balance").innerHTML = formatAmount(response.balanceNQT);
								document.getElementById("enabledSendMoney").style.display = response.balanceNQT > 0 ? "block" : "none";
								document.getElementById("disabledSendMoney").style.display = response.balanceNQT > 0 ? "none" : "block";
								break;
							case "setBlockGenerationDeadline":
								document.getElementById("recentBlocksFrame").contentWindow.setDeadline(response.deadline);
								break;
							case "showAuthorizationToken":
								showDialog("Authorization", "<table style='margin-top: 50px;'><tr><td class='label'>Authorization token</td></tr>"
								    + "<tr><td class='input'><textarea id='input'>" + response.token + "</textarea></td></tr></table>");
								break;
							case "showMessage":
								showMessage(response.message);
								break;
							case "unlockAccount":
								document.getElementById("lock").style.display = "block";
								document.getElementById("unlock").style.display = "none";
								account = response.account;
								element = document.getElementById("account");
								element.innerHTML = account +
								    "<div class='key' title='Click to authorize on a third-party website with this account' onclick='showAuthorizationDialog();'></div>";
								element.style.display = "block";
								element = document.getElementById("balance");
								element.innerHTML = formatAmount(response.balanceNQT);
								element.style.display = "block";
								document.getElementById(response.balanceNQT > 0 ? "enabledSendMoney" : "disabledSendMoney").style.display = "block";
								closeDialog();
								if (response.secretPhraseStrength < 4) {
									showMessage("Your secret phrase is <b>too short</b><br>and can be easily picked by a hacker!");
								}
								break;
							case "updateAssets":
								document.getElementById("assetsFrame").contentWindow.updateAssets(response.assets);
								break;
							}
						}
					}
				};
				numberOfPendingRequests++;
				request.send(params);
			}
			
			function setSelectedAsset(assetId) {
				selectedAssetId = assetId;
			}
			
			function showAccountDialog() {
				showDialog("Account", "<table style='margin-top: 20px;'><tr><td class='label'>Secret phrase</td></tr>" +
				    "<tr><td class='input'><input type='password' id='input' onkeydown='if (event.keyCode == 13) unlockAccount(); else if (event.keyCode == 27) closeDialog();'></td></tr>" +
				    "<tr><td><button id='unlockAccount' onclick='unlockAccount();'>Unlock account</button></td></tr>" +
				    "<tr><td><b>If opening a new account, please note:</b><br /> " +
				    "A simple passphrase will certainly result in your NXT being stolen! Do not use any phrase that appears in any printed or online material, " +
				    "no matter how long or obscure. A secure passphrase will be at least 35 characters long and consist of random letters, numbers, and special " +
				    "characters, or a meaningless combination of 10 random words.</td></tr></table>");
			}
			
			function showAuthorizationDialog() {
				showDialog("Authorization", "<table style='margin-top: 50px;'><tr><td class='label'>Website</td></tr>" +
				"<tr><td class='input'><input id='input' onkeydown='if (event.keyCode == 13) generateAuthorizationToken(); else if (event.keyCode == 27) closeDialog();'></td></tr>" +
				"<tr><td class='label'>Secret phrase</td></tr>" +
				"<tr><td class='input'><input type='password' id='secretPhrase' onkeydown='if (event.keyCode == 13) generateAuthorizationToken(); else if (event.keyCode == 27) closeDialog();'></td></tr>" +
				"<tr><td><button id='generateAuthorizationToken' onclick='generateAuthorizationToken();'>Generate authorization token</button></td></tr></table>");
			}
			
			function showDialog(title, content, oncloseFunction) {
				document.getElementById("dialogTitle").innerHTML = title;
				document.getElementById("dialogContent").innerHTML = content;
				document.getElementById("dialogClose").onclick = oncloseFunction ? oncloseFunction : closeDialog;
				document.getElementById("interfaceDisabler").style.display = "block";
				var input = document.getElementById("input");
				if (input != null) {
					input.focus();
				}
			}
			
			function showMessage(message, oncloseFunction) {
				showDialog("Message", "<table><tr><td class='message'>" + message + "</td></tr></table>", oncloseFunction);
			}
			
			function showAskOrderDialog(quantity, price, fee) {
				showDialog("Ask order", "<table style='margin-top: 38px;'>" +
				    "<tr><td class='label' style='padding-top: 0;'>Quantity</td><td class='label' style='padding-top: 0;'>Price</td></tr>" +
				    "<tr><td class='input'><input type='number' id='input' oninput='adjustAmount();'></td><td class='input'><input type='number' id='price' oninput='adjustAmount();'></td></tr>" +
				    "<tr><td class='label' style='padding-top: 0;'>Amount</td><td class='label' style='padding-top: 0;'>Fee</td></tr>" +
				    "<tr><td class='input'><input type='number' id='amount' readonly></td><td class='input'><input type='number' id='fee'></td></tr>" +
				    "<tr><td colspan='2'><button id='placeAskOrder' onclick='placeAskOrder();'>Place ask order</button></td></tr></table>");
				document.getElementById("input").value = quantity;
				document.getElementById("price").value = price;
				document.getElementById("fee").value = fee;
			}
			
			function showAssetDialog(name, description, quantity, fee) {
				showDialog("Asset", "<table><tr><td class='label' colspan='2'>Name</td></tr><tr><td class='input' colspan='2'><input id='input' maxlength='20'></td></tr>" +
				    "<tr><td class='label' colspan='2'>Description</td></tr><tr><td class='input' colspan='2'><input id='description' maxlength='1000'></td></tr>" +
				    "<tr><td class='label' style='padding-top: 0;'>Quantity</td><td class='label' style='padding-top: 0;'>Fee</td></tr>" +
				    "<tr><td class='input'><input type='number' id='quantity'></td><td class='input'><input type='number' id='fee'></td></tr>" +
				    "<tr><td colspan='2'><button id='issueAsset' onclick='issueAsset();'>Issue asset</button></td></tr></table>");
				document.getElementById("input").value = name;
				document.getElementById("description").value = description;
				document.getElementById("quantity").value = quantity;
				document.getElementById("fee").value = fee;
			}
			
			function showBidOrderDialog(quantity, price, fee) {
				showDialog("Bid order", "<table style='margin-top: 38px;'>" +
				    "<tr><td class='label' style='padding-top: 0;'>Quantity</td><td class='label' style='padding-top: 0;'>Price</td></tr>" +
				    "<tr><td class='input'><input type='number' id='input' oninput='adjustAmount();'></td><td class='input'><input type='number' id='price' oninput='adjustAmount();'></td></tr>" +
				    "<tr><td class='label' style='padding-top: 0;'>Amount</td><td class='label' style='padding-top: 0;'>Fee</td></tr>" +
				    "<tr><td class='input'><input type='number' id='amount' readonly></td><td class='input'><input type='number' id='fee'></td></tr>" +
				    "<tr><td colspan='2'><button id='placeBidOrder' onclick='placeBidOrder();'>Place bid order</button></td></tr></table>");
				document.getElementById("input").value = quantity;
				document.getElementById("price").value = price;
				document.getElementById("fee").value = fee;
			}
			
			function showTransactionDialog(recipient, amountNXT, feeNXT, deadline) {
				showDialog("Transaction", "<table><tr><td class='label' colspan='2'>Recipient</td></tr><tr><td class='input' colspan='2'><input id='input'></td></tr>" +
				    "<tr><td class='label' style='padding-top: 0;'>Amount</td><td class='label' style='padding-top: 0;'>Fee</td></tr>" +
				    "<tr><td class='input'><input type='number' id='amountNXT' oninput='adjustFee();'></td><td class='input'><input type='number' id='feeNXT'></td></tr>" +
				    "<tr><td class='label' colspan='2' style='padding-top: 0;'>Deadline (in hours)</td></tr><tr><td class='input'><input type='number' id='deadline' oninput='adjustDeadlineTime();'></td>" +
				        "<td class='input'><input id='deadlineTime' readonly></td></tr>" +
				    "<tr><td class='label' colspan='2'>Secret phrase</td></tr>" +
				    "<tr><td class='input' colspan='2'><input type='password' id='secretPhrase'></td></tr>" +
				    "<tr><td colspan='2'><button id='sendMoney' onclick='sendMoney();'>Send money</button></td></tr></table>");
				document.getElementById("input").value = recipient;
				document.getElementById("amount").value = amount;
				document.getElementById("fee").value = fee;
				document.getElementById("deadline").value = deadline;
				adjustDeadlineTime();
			}
			
			function toggleAdvancedWidget(advancedWidgetIndex) {
				var advancedWidgetToggle = document.getElementById(advancedWidgetIds[advancedWidgetIndex] + "Toggle"), i, element;
				if (advancedWidgetToggle.className == "enabled" + advancedWidgetToggleClassNames[advancedWidgetIndex]) {
					advancedWidgetToggle.className = "disabled" + advancedWidgetToggleClassNames[advancedWidgetIndex];
				} else {
					for (i = 0; i < 4; i++) {
						element = document.getElementById(advancedWidgetIds[i] + "Toggle");
						if (element.className == "enabled" + advancedWidgetToggleClassNames[i]) {
							element.className = "disabled" + advancedWidgetToggleClassNames[i];
						}
					}
					advancedWidgetToggle.className = "enabled" + advancedWidgetToggleClassNames[advancedWidgetIndex];
					switch (advancedWidgetIndex) {
					case 2:
						requestAssets();
						break;
					}
				}
				adjustWidgets();
			}
			
			function toggleAssetFilter(filterIndex) {
				var filterIds = ["issued", "owned", "other"], filterClassNames = ["Issued", "Owned", "Other"],
				    element = document.getElementById(filterIds[filterIndex] + "Assets");
				element.className = element.className == "enabled" + filterClassNames[filterIndex] + "Assets" ?
				    ("disabled" + filterClassNames[filterIndex] + "Assets") : ("enabled" + filterClassNames[filterIndex] + "Assets");
				requestAssets();
			}
			
			function toggleWidget(widgetIndex) {
				var widgetToggle = document.getElementById(widgetIds[widgetIndex] + "Toggle");
				if (widgetToggle.className == "enabled" + widgetToggleClassNames[widgetIndex]) {
					widgetToggle.className = "disabled" + widgetToggleClassNames[widgetIndex];
				} else {
					widgetToggle.className = "enabled" + widgetToggleClassNames[widgetIndex];
				}
				adjustWidgets();
			}
			
			function unlockAccount() {
				document.getElementById("input").readOnly = true;
				document.getElementById("unlockAccount").disabled = true;
				sendRequest("unlockAccount&secretPhrase=" + encodeURIComponent(document.getElementById("input").value));
			}
		</script>
	</head>
	<body onload="initialize();" onresize="adjustWidgets();">
		<div class="bar" style="top: 0;">
			<div id="unlock" class="unlock" title="Unlock a new or an existing account" onclick="showAccountDialog();"></div>
			<div id="lock" class="lock" title="Lock this account" onclick="requestAccountLocking();"></div>
			<div id="account" class="account" title="Account"></div>
			<div id="transactionsToggle" class="disabledTransactions" title="Transactions" onclick="toggleWidget(0);"></div>
			<div id="peersToggle" class="disabledPeers" title="Peers" onclick="toggleWidget(1);"></div>
			<div id="blocksToggle" class="disabledBlocks" title="Blocks" onclick="toggleWidget(2);"></div>
			<div id="accountsToggle" class="disabledAccounts" title="Accounts" onclick="toggleWidget(3);"></div>
			<div id="balance" class="balance" title="Balance"></div>
			<div id="enabledSendMoney" class="enabledSendMoney" title="Send money" onclick="showTransactionDialog('', '', '', 24);"></div>
			<div id="disabledSendMoney" class="disabledSendMoney" title="Send money"></div>
		</div>
		<div id="transactions" class="widget">
			<div class="widgetHeader">
				<div class="widgetTitle">Transactions</div>
				<div class="close" title="Close" onclick="toggleWidget(0);"></div>
			</div>
			<div id="transactionsContent" class="widgetContent">
				<div id="myTransactions" class="section" style="top: 10px;">My transactions [<span id="myTransactionsCounter">0</span>]
                    <div id="myTransactionsExpand" class="expand" title="Expand" style="display: none;" onclick="expand('myTransactions');"></div>
                    <div id="myTransactionsCollapse" class="collapse" title="Collapse" onclick="collapse('myTransactions');"></div>
                </div>
				<iframe id="myTransactionsFrame" class="widget" src="myTransactions.html" style="top: 35px;"></iframe>
				<div id="unconfirmedTransactions" class="section">Unconfirmed transactions [<span id="unconfirmedTransactionsCounter">0</span>]
                    <div id="unconfirmedTransactionsExpand" class="expand" title="Expand" onclick="expand('unconfirmedTransactions');"></div>
                    <div id="unconfirmedTransactionsCollapse" class="collapse" title="Collapse" style="display: none;" onclick="collapse('unconfirmedTransactions');"></div>
                </div>
				<iframe id="unconfirmedTransactionsFrame" class="widget" src="unconfirmedTransactions.html" style="display: none;"></iframe>
				<div id="doubleSpendingTransactions" class="section">Double-spending transactions [<span id="doubleSpendingTransactionsCounter">0</span>]
                    <div id="doubleSpendingTransactionsExpand" class="expand" title="Expand" onclick="expand('doubleSpendingTransactions');"></div>
                    <div id="doubleSpendingTransactionsCollapse" class="collapse" title="Collapse" style="display: none;" onclick="collapse('doubleSpendingTransactions');"></div>
                </div>
				<iframe id="doubleSpendingTransactionsFrame" class="widget" src="doubleSpendingTransactions.html" style="display: none;"></iframe>
			</div>
		</div>
		<div id="peers" class="widget">
			<div class="widgetHeader">
				<div class="widgetTitle">Peers</div>
				<div class="close" title="Close" onclick="toggleWidget(1);"></div>
			</div>
			<div id="peersContent" class="widgetContent">
				<div id="activePeers" class="section" style="top: 10px;">Active peers [<span id="activePeersCounter">0</span>]
                    <div id="activePeersExpand" class="expand" title="Expand" style="display: none;" onclick="expand('activePeers');"></div>
                    <div id="activePeersCollapse" class="collapse" title="Collapse" onclick="collapse('activePeers');"></div>
                </div>
				<iframe id="activePeersFrame" class="widget" src="activePeers.html" style="top: 35px;"></iframe>
				<div id="knownPeers" class="section">Known peers [<span id="knownPeersCounter">0</span>]
                    <div id="knownPeersExpand" class="expand" title="Expand" onclick="expand('knownPeers');"></div>
                    <div id="knownPeersCollapse" class="collapse" title="Collapse" style="display: none;" onclick="collapse('knownPeers');"></div>
                </div>
				<iframe id="knownPeersFrame" class="widget" src="knownPeers.html" style="display: none;"></iframe>
				<div id="blacklistedPeers" class="section">Blacklisted peers [<span id="blacklistedPeersCounter">0</span>]
                    <div id="blacklistedPeersExpand" class="expand" title="Expand" onclick="expand('blacklistedPeers');"></div>
                    <div id="blacklistedPeersCollapse" class="collapse" title="Collapse" style="display: none;" onclick="collapse('blacklistedPeers');"></div>
                </div>
				<iframe id="blacklistedPeersFrame" class="widget" src="blacklistedPeers.html" style="display: none;"></iframe>
			</div>
		</div>
		<div id="blocks" class="widget">
			<div class="widgetHeader">
				<div class="widgetTitle">Blocks</div>
				<div class="close" title="Close" onclick="toggleWidget(2);"></div>
			</div>
			<div id="blocksContent" class="widgetContent">
				<div id="recentBlocks" class="section" style="top: 10px;">Recent blocks [<span id="recentBlocksCounter">0</span>]
                    <div id="recentBlocksExpand" class="expand" title="Expand" style="display: none;" onclick="expand('recentBlocks');"></div>
                    <div id="recentBlocksCollapse" class="collapse" title="Collapse" onclick="collapse('recentBlocks');"></div>
                </div>
				<iframe id="recentBlocksFrame" class="widget" src="recentBlocks.html" style="top: 35px;"></iframe>
				<div id="orphanedBlocks" class="section">Orphaned blocks [<span id="orphanedBlocksCounter">0</span>]
                    <div id="orphanedBlocksExpand" class="expand" title="Expand" onclick="expand('orphanedBlocks');"></div>
                    <div id="orphanedBlocksCollapse" class="collapse" title="Collapse" style="display: none;" onclick="collapse('orphanedBlocks');"></div>
                </div>
				<iframe id="orphanedBlocksFrame" class="widget" src="orphanedBlocks.html" style="display: none;"></iframe>
				<div id="weirdBlocks" class="section">Weird blocks [<span id="weirdBlocksCounter">0</span>]
                    <div id="weirdBlocksExpand" class="expand" title="Expand" onclick="expand('weirdBlocks');"></div>
                    <div id="weirdBlocksCollapse" class="collapse" title="Collapse" style="display: none;" onclick="collapse('weirdBlocks');"></div>
                </div>
				<iframe id="weirdBlocksFrame" class="widget" src="weirdBlocks.html" style="display: none;"></iframe>
			</div>
		</div>
		<div id="accounts" class="widget">
			<div class="widgetHeader">
				<div class="widgetTitle">Accounts</div>
				<div class="close" title="Close" onclick="toggleWidget(3);"></div>
			</div>
			<div id="accountsContent" class="widgetContent">
				<div id="activeAccounts" class="section" style="top: 10px;">Active accounts [<span id="activeAccountsCounter">0</span>]
                    <div id="activeAccountsExpand" class="expand" title="Expand" style="display: none;" onclick="expand('activeAccounts');"></div>
                    <div id="activeAccountsCollapse" class="collapse" title="Collapse" onclick="collapse('activeAccounts');"></div>
                </div>
				<iframe id="activeAccountsFrame" class="widget" src="activeAccounts.html" style="top: 35px;"></iframe>
				<div id="newAccounts" class="section">New accounts [<span id="newAccountsCounter">0</span>]
                    <div id="newAccountsExpand" class="expand" title="Expand" onclick="expand('newAccounts');"></div>
                    <div id="newAccountsCollapse" class="collapse" title="Collapse" style="display: none;" onclick="collapse('newAccounts');"></div>
                </div>
				<iframe id="newAccountsFrame" class="widget" src="newAccounts.html" style="display: none;"></iframe>
				<div id="suspiciousAccounts" class="section">Suspicious accounts [<span id="suspiciousAccountsCounter">0</span>]
                    <div id="suspiciousAccountsExpand" class="expand" title="Expand" onclick="expand('suspiciousAccounts');"></div>
                    <div id="suspiciousAccountsCollapse" class="collapse" title="Collapse" style="display: none;" onclick="collapse('suspiciousAccounts');"></div>
                </div>
				<iframe id="suspiciousAccountsFrame" class="widget" src="suspiciousAccounts.html" style="display: none;"></iframe>
			</div>
		</div>
		<div id="interfaceDisabler" class="interfaceDisabler">
			<div class="dialog">
				<div class="dialogHeader">
					<div id="dialogTitle" class="dialogTitle"></div>
					<div id="dialogClose" class="close" title="Close"></div>
				</div>
				<div id="dialogContent" class="dialogContent"></div>
			</div>
		</div>
	</body>
</html>